<template>
  <div class="app-container" id="main"></div>
</template>

<script>
import * as echarts from "echarts";
export default {
  data() {
    return {
      // A数据
      neighData: [],
      queryInfoA: {
        currPage: 1,
        pageNum: 4,
        unitname: "A",
      },
      //   B数据
      neighDataB: [],
      queryInfoB: {
        currPage: 1,
        pageNum: 4,
        unitname: "B",
      },
      //   C数据
      neighDataC: [],
      queryInfoC: {
        currPage: 1,
        pageNum: 4,
        unitname: "C",
      },
      //   D数据
      neighDataD: [],
      queryInfoD: {
        currPage: 1,
        pageNum: 4,
        unitname: "D",
      },
    };
  },
  mounted() {
    this.getEchartsDataA();
  },
  methods: {
    async getEchartsDataA() {
      let res = await this.$axios({
        url: "/house/searchList",
        methods: "get",
        params: this.queryInfoA,
      });
      //   console.log(res);
      this.neighData = res.data.total;

      //   B数据
      let resB = await this.$axios({
        url: "/house/searchList",
        methods: "get",
        params: this.queryInfoB,
      });
      //   console.log(resB);
      this.neighDataB = resB.data.total;

      //   C数据
      let resC = await this.$axios({
        url: "/house/searchList",
        methods: "get",
        params: this.queryInfoC,
      });
      this.neighDataC = resC.data.total;

      //   D数据
      let resD = await this.$axios({
        url: "/house/searchList",
        methods: "get",
        params: this.queryInfoD,
      });
      this.neighDataD = resD.data.total;
      // 绘制图表
      this.echartsInit();
    },
    echartsInit() {
      echarts.init(document.getElementById("main")).setOption({
        color: ["#F5DE6C","#D8ECFF","#339DFF","#B0F5AA"],
        title: {
          text: "小区分布统计",
          left: "center",
        },
        toolbox: {
          show: true,
          feature: {
            mark: { show: true },
            dataView: { show: true, readOnly: false },
            restore: { show: true },
            saveAsImage: { show: true },
          },
        },
        tooltip: {
          trigger: "item",
        },
        legend: {
          orient: "vertical",
          left: "left",
        },
        series: [
          {
            name: "Access From",
            type: "pie",
            radius: "50%",
            data: [
              { value: this.neighData, name: "A栋" + this.neighData },
              { value: this.neighDataB, name: "B栋" + this.neighDataB },
              { value: this.neighDataC, name: "C栋" + this.neighDataC },
              { value: this.neighDataD, name: "D栋" + this.neighDataD },
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.app-container::v-deep {
  //   padding: 20px;
  width: 100%;
  height: 350px;
}
</style>
